<template>
  <div class="timing">
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-form :inline="true" :model="formInline" class="demo-form-inline queryFrom">
          <el-form-item label="数据模型名称">
            <el-input v-model="formInline.dataModelName" clearable placeholder="请输入数据模型名称" />
          </el-form-item>
          <el-form-item>
            <el-button plain @click="getUserList"><Icon type="ios-search" />查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 按钮 -->
    <!-- <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-button type="primary" @click="addUser('add')"><Icon type="md-add" />新增</el-button>
      </el-col>
    </el-row> -->
    <!-- 表格 -->
    <ykhttb ref="httbRef" width="250"  :btn-is-show="btnIsShow" :table-col="tabUserList" :table-data="tableUserData" 
    @getDataDetileInfo="getDataDetileInfo2"
    @deleteSelectData="deleteSelectData" @refresh="getUserList" />
    <!-- 分页 -->
    <div style="text-align:right;margin-top:10px;">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog :close-on-click-modal="false" title="错误日志" width="50%" :visible.sync="dialogTableVisible">
      <el-form :inline="true" :model="formInline" class="demo-form-inline queryFrom">
        <el-form-item label="质量规则名称">
          <el-select v-model="qualityRuleId" clearable placeholder="请选择">
            <el-option
              v-for="(item,index) in options"
              :key="index"
              :label="item.qualityRuleName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="执行时间">
          <el-form-item>
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
          <el-button plain @click="queryDataDetileInfo2"><Icon type="ios-search" />查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 名称和路径必输 -->
      <ykhttb ref="httbRef2" :btn-is-show="btnIsShow2" :table-col="tabUserList2" :table-data="detileListInfo"></ykhttb>
      <div style="text-align:right;margin-top:10px;">
        <el-pagination
          :current-page="page2"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="size2"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total2"
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { 
  dataQualityloggetList, 
  dataQualityrulegetList, 
  dataQualitylogdeleteByIds,
  dataQualityloggetLogDetailList } from '@/api/zt/index'
import experiment from '@/mixins/experiment'

export default {
  components: {
  },
  mixins: [experiment],
  data() {
    return {
      options:[],
      value1: [],
      qualityRuleId:"",
      detileListInfo:null,
      btnIsShow: {
        operate: true,
        update:false,
        detile: true,
        del: true
      },
      btnIsShow2: {
        operate: false,
        update:false,
        detile: true,
        del: true
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      title: '新增',
      rules: {},
      dialogTableVisible: false,
      ruleForm: {
        'clusterName': ' ',
        'zkpAddress': ' ',
        'broker': ' ',
        'kafkaVersion': ''
      },
      userId: '',
      formInline: {
        'dataModelName': ''
      },
      tableUserData: [],
      tabUserList: [
        {
          key: 'dataModelName',
          title: '数据模型名称'
        },
        {
          key: 'lastExecuteTime',
          title: '上一次执行时间'
        },
        {
          key: 'nextExecuteTime',
          title: '下一次执行时间'
        },
        {
          key: 'lastCheckErrLogCount',
          title: '上一次检测错误数量'
        },
        {
          key: 'errLogCount',
          title: '错误日志总计'
        }
      ],
      tabUserList2: [
        {
          key: 'qualityRuleName',
          title: '质量规则名称'
        },
        {
          key: 'fieldName',
          title: '字段名称'
        },
        {
          key: 'sourceData',
          title: '源数据'
        },
        {
          key: 'remark',
          title: '问题描述'
        },{
          key:"executeTime",
          title:"执行时间"
        }
      ],
      total: 0,
      size: 10,
      page: 1,
      total2: 0,
      size2: 10,
      page2: 1,
      selectDataStr:''
    }
  },
  created() {
    dataQualityrulegetList({
        'pageIndex': 1,
        'pageSize': 1000,
        'qualityRuleName':''
      }).then(res => {
        this.options = res.data.records
      })
  },
  mounted() {
    this.$nextTick(() => {
      this.getUserList()
    })
  },
  methods: {
    handleSizeChange2(v) {
      this.page2 = 1
      this.size2 = v
      this.getDataDetileInfo2(this.selectDataStr)
    },
    handleCurrentChange2(v) {
      this.page2 = v
      this.getDataDetileInfo2(this.selectDataStr)
    },
    getDataDetileInfo2(v) {
      this.qualityRuleId = ''
      this.value1 = []
      this.dialogTableVisible = true
      this.selectDataStr = JSON.parse(v)
      // this.selectDataStr = JSON.parse(sessionStorage.getItem('getDataDetileInfo'))
      this.queryDataDetileInfo2()
    },
    queryDataDetileInfo2(){
      dataQualityloggetLogDetailList({
        'pageIndex':this.page2,
        'pageSize':this.size2,
        'qualityLogId': this.selectDataStr.id,
        'qualityRuleId':this.qualityRuleId,
        'endTime':this.value1?this.value1[1]:null,
        'startTime': this.value1?this.value1[0]:null,
      }).then(res => {
        this.detileListInfo = res.data.records
        this.total2 = res.data.total
      })
    },
    deleteSelectData(v) {
      const ids = [{ id: v.id }]
      dataQualitylogdeleteByIds(ids).then(res => {
        if (res.code == 200) {
          this.getUserList()
        } else {
          this.errorDialog(res.msg)
        }
      })
    },
    handleNodeClick(data) { },
    commitFromData() {},
    handleSizeChange(v) {
      this.page = 1
      this.size = v
      this.getUserList()
    },
    handleCurrentChange(v) {
      this.page = v
      this.getUserList()
    },



    // 获取用户列表
    getUserList() {
      this.dialogTableVisible = false
      this.$refs.httbRef.isShowLoading(true)

      dataQualityloggetList({
        'pageIndex': this.page,
        'pageSize': this.size,
        'dataModelName': this.formInline.dataModelName
      }).then(res => {
        this.tableUserData = res.data.records
        this.total = res.data.total
      this.$refs.httbRef.isShowLoading(false)

      })
    }
  }
}
</script>

      <style lang="scss" scoped>
      >>>.jsoneditor-poweredBy {
        display: none !important;
      }

      .addPs{
        display: flex;
        flex-direction: row;
        margin-bottom: 10px;
        >div{
          width:50%
        }
        span{
          display: inline-block;
          width: 10%;
        }
      }
      .el-form{
        // display: flex;
        // flex-direction: row;
        // flex-wrap: wrap;
      }
      .el-form-item{
        // width:50%;
      }
      .addcs{
        display: flex;
        flex-direction: row;
        margin-bottom: 10px;
      }
      .addcs2 .el-select {
        display: inline-block;
        width: 240px;
      }
      .autoInput{
        display: inline-block;
        width: 70%;
      }
      .infoTitle{
        border-bottom:1px solid #e5e5e5;
        margin-bottom: 30px;
        position: relative;
      }
      .infoTitle>span{
        position: absolute;
        left: 20px;
        background: #fff;
        width:80px;
        top:-15px;
        height:30px;
        text-align: center;
        line-height: 30px;
      }
        .el-select{
           width:100%;
        }
        .timing{
          background:#fff;
          padding:20px;
        }
      </style>
